<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jqGrid表格的使用</title>
	<!-- 引入CSS样式 -->	
	<!--<link rel="stylesheet" href="../../lib/jqgrid/ui.jqgrid-bootstrap-ui.css" />
	<link rel="stylesheet" href="../../lib/jqgrid/ui.jqgrid-bootstrap.css" />
	<link rel="stylesheet" href="../../lib/jqgrid/ui.jqgrid.css" />-->
	
	<!-- 引入jQuery -->
	<script src="../../lib/jq/jquery-1.11.3.min.js" type="text/javascript"></script>
	<!-- 引入JS -->
	<script src="../../lib/jqgrid/grid.locale-cn.js" type="text/javascript"></script>
	<script src="../../lib/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
	
	<style>
		table{
			border:1px blue solid;
		}
		table tr td,th{
			border:1px blue solid;
		}
	</style>
	
	</head>
	<body>
		<fieldset>
			<legend><h1>1-普通的表格</h1></legend>
			<button id="btn1">得到所有勾选的行</button>
			<button id="btn2">得到所有的行</button>
			<button id="btn3">得到所有的列</button>
			<div>
				<table id="jqGrid"></table>
	    		<div id="jqGridPager"></div>
			</div>
			
		</fieldset>
		<script>
			$(function(){
				$("#jqGrid").jqGrid({
			        /*url: '../sys/menu/list',*/ //ajax加载数据
			        datatype: "json",
			        /*colNames:['姓名','年龄', '性别', '工资'], //设置表头*/
			        colModel: [	
						{ label: '姓名', name: 'name', index: "name", width: 50 , sortable: true},
						{ label: '年龄', name: 'age', index: "age", width: 50},
						{ label: '性别', name: 'gender', index: "gender", width: 50},
						{ label: '工资', name: 'salary', index: "salary", width: 50},
						{ label: '辈份', name: 'level', index: "level", width: 50,
							formatter: function(cellValue,options,rowObject) {
							console.log(cellValue,options,rowObject); 
							if(cellValue == "长辈"){
								return '<a href="javascript:;">'+cellValue+'</a>'
							}else{
								return cellValue
							}
						}},
						{ label: '工资等级', name: 'type', index: "type", width: 50}
			        ],
			        sortable: true,
			        sortorder:'asc',
			        width:"100%",
					viewrecords: true,
			        height: 300,
			        rowNum: 10,
					rowList : [10,30,50],
			        rownumbers: true, 
			        rownumWidth: 25, 
			        autowidth:true,
			        multiselect: true,
			        pager: "#jqGridPager",//底部的分页栏
			        jsonReader : {
			            root: "page.list",
			            page: "page.currPage",
			            total: "page.totalPage",
			            records: "page.totalCount"
			        },
			        prmNames : {
			            page:"page", 
			            rows:"limit", 
			            order: "order"
			        },
			        gridComplete:function(){
			        	//隐藏grid底部滚动条
			        	$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
			        }
			    });
			    
			    // 表格填充的数据
			    var rows = [
			    	{name:"bart",age:"18",gender:"man",salary:"10000.00",level:"小辈",type:"0" },
			    	{name:"lisa",age:"15",gender:"women",salary:"15000.00",level:"小辈",type:"2" },
			    	{name:"maggie",age:"10",gender:"women",salary:"20000.00",level:"小辈",type:"1" },
			    	{name:"homer",age:"38",gender:"man",salary:"13000.00",level:"长辈",type:"1" },
			    	{name:"marge",age:"38",gender:"women",salary:"16000.00",level:"长辈",type:"2" },
			    ]
			    
			    // 开始填充本地数据
			    for(let k in rows){
//			    	console.log(k)
			    	$("#jqGrid").jqGrid("addRowData",k,rows[k]);
			    }
			    
			    console.log("-------------------------------")
			    // 获得 jqGrid 的 jsonReader 值
			    /*console.log($("#jqGrid").jqGrid()[0].p.jsonReader)
			    var jqgrid = $("#jqGrid").jqGrid()[0];
			    console.log(jqgrid)*/
			    /*for(let k in jqgrid){
			    	if( Object.prototype.toString.call(jqgrid[k]).slice(8,-1) == "Object" 
			    	|| Object.prototype.toString.call(jqgrid[k]).slice(8,-1) == "Array"){
			    		console.log(k,jqgrid[k]);	
			    	}
			    }*/
			    //遍历 p 
			    /*for(let k in  $("#jqGrid").jqGrid()[0].p){
			    	console.log(k,$("#jqGrid").jqGrid()[0][k]);
			    }*/
			    console.log("-------------------------------")
			    
			    // 获得选中的行
			    $("#btn1").click(function(){
			    	// 获得选中行的id,单指一行,如果选择多行,返回的是最后一行
			    	let row = $("#jqGrid").jqGrid("getGridParam","selrow")
			    	console.log(row);//未选中就是null
			    	
			    	console.log("---------华丽的分隔符---------");
			    	
			    	// 获得所有选中行的id
			    	let rowIds = $("#jqGrid").jqGrid("getGridParam","selarrrow")
			    	console.log(rowIds);//未选中就是空数组
			    	
			    	console.log("---------华丽的分隔符---------");
			    	
			    	// 获得选择的row的对象
			    	for(let k in rowIds){
			    		let row = $("#jqGrid").jqGrid('getRowData',k);
			    		console.log(row);
			    	}
			    	
			    })
			    
			    //获得所有的行，并格式化
			    $("#btn2").click(function(){
			    	console.log('--- 获得所有行 ---')
//			    	let rs = $("#jqGrid").jqGrid('getRowData') //获取所有的行有BUG,拿不到最后一行
			    	let ids = $("#jqGrid").jqGrid('getDataIDs');//获得所有的rowId
			    	console.log(ids)
					for(let i= 0; i < ids.length; i++){
						let r = $("#jqGrid").jqGrid('getRowData',ids[i])
//						console.log(i,r)
						if(r.gender == 'man'){
							$("#jqGrid").jqGrid('setCell',i,'gender','男')
						}else{
							$("#jqGrid").jqGrid('setCell',i,'gender','女')
						}
					}
			    });
			    
			    //获得所有的列和name（拿不到）
			    $("#btn3").click(function(){
			    	console.log('--- 获得所有列和name ---')
			    	let postData = $("#jqGrid").jqGrid()[0].p.postData;
			    	console.log(postData);
			    	console.log('page : ',postData.page);
			    	console.log('limit : ',postData.limit);
			    	console.log('sidx : ',postData.sidx);
			    	console.log('sidx : ',postData.order);
			    	console.log("总记录数",$("#jqGrid").jqGrid()[0].p.records);
			    });
			    
			    
			    formatter();
			    
			})
			
			
			var t=0;
			function formatter(){
//				console.log('$("#jqGrid").eq(1)',$("#jqGrid").jqGrid('getDataIDs'));
				if($("#jqGrid").jqGrid('getDataIDs').length == 0 || $("#jqGrid").jqGrid('getDataIDs').length == undefined){
					   // 延时 200ms 递归调用
					   t = setTimeout(function(){
							formatter();
					   },200);
				   }else{
					   t = 0;
					   formatterGrid();
				   }
			}
			
			
			//格式化一行
			function formatterGrid(){
				console.log("formatterGrid");
				//管理被格式化字段的name和metaType的map
				let m = {'type':'LeiXing'};
				let ids = $("#jqGrid").jqGrid('getDataIDs');//获得所有的rowId
	//			console.log(ids);
				for(let i= 0; i < ids.length; i++){
					let r = $("#jqGrid").jqGrid('getRowData',ids[i]);//获得当前行
					formatterRow(r,m,ids[i]);
				}
			} 
			
			
			//格式化一个单元格
			function formatterRow(r,m,i){
				console.log("formatterRow");
				console.log("r",r);
				//枚举值集合数组
				let enums = [
								{metaType:'LeiXing',value:'0',name:'普通工资'},
								{metaType:'LeiXing',value:'1',name:'中等工资'},
								{metaType:'LeiXing',value:'2',name:'高等工资'}
							]
				//遍历当前行
				for(let k in r){
					if(m[k] != undefined){//是枚举类型
						let v = r[k] //拿到当前字段的值
						console.log(k,r.k);
						for(let k2 in enums){//遍历枚举集合
							//如果m中的枚举key值和enumsList中的枚举key相同同时值也相同
							console.log(k2,enums[k2])
							if( enums[k2].metaType == m[k] && enums[k2].value == v){
								console.log('setCell',i,k,enums[k2].name);
								$("#jqGrid").jqGrid('setCell',i,k,enums[k2].name)
							}
						}
						
					}
				}
			
			}
			
		</script>
	</body>
</html>
